import React, { useEffect, useState } from 'react';
import { getNewDisc } from '@/api/recommend'
import { Card, Tag, Skeleton } from 'antd';
import newStyle from '@/styles/recommendNew.module.scss'
import { useNavigate } from 'react-router-dom';

export default function RecommendNew() {
  const navigate = useNavigate();
  const toDetail = (id) => {
    console.log(id);
    navigate(`/albums/details/${id}`);
  };
  const [newDiscData, setNewDiscData] = useState([])

  const [isLoading, setIsLoading] = useState(true);

  const getDiscData = (area) => {
    getNewDisc(area).then(res => {
      setNewDiscData(res.data.monthData.slice(0, 50))
      setTimeout(() => {
        setIsLoading(false)
      }, 500);
    })
  }
  
  
  useEffect(() => {
    getDiscData()
  }, [])

  // console.log(newDiscData);
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', marginTop: 50 ,overflowX:'hidden'}}>
      <div style={{
        width: '100%', height: 30, position: 'fixed', left: 200, top: 64,
        zIndex: 1000, backgroundColor: '#fff'
      }}
      >
        <Tag style={{ cursor: 'pointer' }} onClick={() => getDiscData()}>全部</Tag>
        <Tag style={{ cursor: 'pointer' }} onClick={() => getDiscData('ZH')}>华语</Tag>
        <Tag style={{ cursor: 'pointer' }} onClick={() => getDiscData('EA')}>欧美</Tag>
        <Tag style={{ cursor: 'pointer' }} onClick={() => getDiscData('KR')}>韩国</Tag>
        <Tag style={{ cursor: 'pointer' }} onClick={() => getDiscData('JP')}>日本</Tag>
      </div>

      <div style={{ display: 'flex', flexWrap: 'wrap', position: 'relative', left: 120, }}>
        
        {isLoading ? (<>
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          <Skeleton.Image style={{ width: 250, height: 300, margin: 25 }} active='active' />
          </>
        ) : (
          newDiscData && newDiscData.map((item) => {
            return <Card
              className={newStyle.disc}
              hoverable
              key={item.id}
              style={{ width: 250, height: 300, display: 'flex' }}
            >
              <img alt="example" src={item.picUrl}
              onClick={()=>toDetail(item.id)}
              />
              <section style={{ fontWeight: 900 }}>{item.name}</section>
              <p>{item.artists[0].name}</p>
            </Card >
          })
        )}
      </div>
    </div>)

}

